<script setup lang="ts">
//定义接受props参数
//vue3.5+的版本的用法
// const { age = 10 } = defineProps<{
//   name: string;
//   age?: number;
// }>();
//vue3.5以下的默认值的设置方式
const props = withDefaults(
  defineProps<{
    name?: string;
    age?: number;
    //鸿蒙回调
    func?(count: number): void;
  }>(),
  {
    name: "默认值",
    age: 100,
  }
);
//子传父自定义事件类型
//update-参数1个 number类型
const emits = defineEmits<{
  //key（事件名称）：value（参数类型数组）
  updateAge: [age: number];
  updateName: [name: string];
  updateAll: [age: number, name: string];
}>();
//实现子传父
const toParent = () => {
  emits("updateAge", props.age + 1);
};
const toParentName = () => {
  emits("updateName", "子组件传父" + "1");
};
</script>

<template>
  <div class="child">
    <h2>子组件显示父组件传过来的数据</h2>
    <p>接受的姓名：{{ name }}</p>
    <p>接受的年龄：{{ age }}</p>
    <button @click="func(age - 1)">子传父-回调函数形式</button>//鸿蒙
    <button @click="toParent">子传父 -emits形式</button>
    <button @click="toParentName">子传父 该名称-emits形式</button>
    <button @click="emits('updateAll', age + 1, '子组件传父' + '2')">
      子传父改全部 -emits形式
    </button>
  </div>
</template>

<style scoped></style>
